<template>
    <view class="card" >
        <!-- Content Header Satrt -->
        <!-- <template v-if="param.level !== 1">
            <view
                class="flex justify-between card--header"
                @click="goPage(`/bundle/pages/category_goods_list/index?id=${pid}`)"
            >
                <view class="name">{{ param.name }}</view>
                <view class="flex">
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
        </template> -->
        <view class="flex justify-between card--header" style="background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/fc7e1d4e-055e-4f7d-bb88-faa5ff4a5586.png');background-size: 100% 100%;">
            <view class="name">{{ param.name }}</view>
        </view>
        <!-- Content Header End -->

        <!-- Content Main Start -->
        <view class="card--main">
            <block v-for="item4 in goodsData" :key="item4.id">
                <view
                    class="goods flex w-[150rpx] h-[140rpx]"
                    @click="goPage(`/pages/goods/index?id=${item4.id}&pid=${props.pid}`)"
                >
                    <!-- <u-image :src="item4.image" width="100%" height="100%" ></u-image> -->
                   <div>
                        <img :src="item4.image" class="img_sty" />
                   </div>
                    <div style="margin-left: 20rpx;width:calc(100% - 160rpx - 20rpx);display: flex;
    justify-content: space-between;
    flex-direction: column;">
                        <view class="mt-[20rpx] truncate">{{ item4.name }}</view>
                        <view class="text-primary mt-[10rpx]" style="width: 100%;text-align: right;">
                            <price :price="item4.price" :desc="item4.unit"></price>
                        </view>
                    </div>
                </view>
            </block>
        </view>
        <!-- Content Main End -->
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect } from 'vue'
import { apiGoodsLists } from '@/api/store'
import Price from '@/components/price/index.vue'
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()
/** Interface Start **/
interface GoodsDataObj {
    id: number
    name: string
    image: string
    remarks: string
    price: string
    unit: string
}
/** Interface End **/

/** Props Start **/
const props = withDefaults(
    defineProps<{
        param?: any // 底部
        pid: any
    }>(),
    {
        param: {
            id: 0,
            name: '',
            sons: []
        },
        pid: 0
    }
)
/** Props End **/

/** Data Start **/
const goodsData = ref<Array<GoodsDataObj> | null | any>([])
/** Data End **/

/** Methods Start **/
/**
 * @return { Promise }
 * @description 初始化分类商品
 */
const initGoodsLists = async (): Promise<void> => {
    console.log('props.param.name', props.param.name)
    if(props.param.name === '优惠码专区') {
        goodsData.value = props.param.sons;
        return;
    }
    const res: any = await apiGoodsLists({ categoryId: props.param.id })
    goodsData.value = res.lists
}

/**
 * @param { String } url
 * @return { Promise }
 * @description 跳转页面
 */
const goPage = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
/** Methods End **/

if (props.param.id) {
    initGoodsLists()
}
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'PINGFANG_SC_SEMIBOLD'; /* 你可以给字体起一个别名 */
   /*  src: url('~@/static/images/user/PINGFANG-SC-SEMIBOLD.ttf') format('truetype'); */ /* 还可以加上 ttf 格式作为备选 */
    font-weight: normal;
    font-style: normal;
} 
.card {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    
	// color: #a998c8;
    &--header {
        color: #fff;
        padding: 13rpx 30rpx;
       
        font-size: 32rpx;

        .name {
            font-weight: 500;
            color: #fff;
            font-size: 28rpx;
        }
    }

    &--main {
        padding: 0 24rpx;
        .goods {
            padding-top: 26rpx;
            display: flex;
            width: 100%;
            min-height: 200rpx;
            .truncate{
                margin: 0;
                font-family: 'PINGFANG_SC_SEMIBOLD', sans-serif;  
                font-weight: 600;
                font-size: 28rpx;
                color: #222222;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        } 
        .goods:nth-child(3n-1) {
            margin-right: 20rpx;
        }
        .goods:nth-child(3n-2) {
            margin-right: 20rpx;
        }
    }
}
.img_sty{
	width: 80px;
	height: 80px;
	border-radius: 15rpx !important;
}
</style>
